<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>

<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen">
            </div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;  // 长连接句柄
        window.onbeforeunload = function() {
            ws_hdl.close();
        }

        var button_flag = "stop";
        var be = document.getElementById("match-button");
        be.onclick = function ()
        {// 点击了这个按钮之后
            if(button_flag == "stop")
            {
                var req_json = 
                {
                    optype : "match_start"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
            else
            {
                var req_json = 
                {
                    optype : "match_stop"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
        }
        function get_user_info() {
            $.ajax
                (
                    {
                        url: "/info",
                        type: "get",
                        success: function (res) 
                        {
                            var info_html = "<p>" + "用户：" + res.username + "积分：" + res.score + "</br>" + "比赛场次：" + res.total_count
                                + "获胜场次：" + res.win_count + "</p>";
                            var screen_div = document.getElementById("screen");
                            screen_div.innerHTML = info_html;
 
                            ws_hdl = new WebSocket(ws_url);// 获取用户信息之后建立长连接
                            ws_hdl.onopen = ws_onpen;
                            ws_hdl.onclose = ws_onclose;
                            ws_hdl.onerror = ws_onerror;
                            ws_hdl.onmessage = ws_onmessage;
                        },
                        error: function (xhr) 
                        {
                            alert(JSON.stringify(xhr));
                            location.replace("/login.html");
                        }
                    }
                )
        }
        function ws_onpen()
        {
            console.log("websokcet onopen");
        }
        function ws_onclose()
        {
            console.log("websokcet onclose");

        }
        function ws_onerror()
        {
            console.log("websokcet onerror");

        }
        function ws_onmessage(evt)
        {
            var resp_json = JSON.parse(evt.data);
            console.log(evt.data);
            if(resp_json.result == false)
            {
                alert(evt.data);
                location.replace("/login.html");
            }
            else if(resp_json["optype"] == "hall_ready")
            {
                alert("成功进入游戏大厅！");
            }
            else if(resp_json["optype"] == "match_start")
            {
                console.log("玩家已经进入匹配队列");
                button_flag = "start";
                be.innerHTML="匹配中...点击可以取消匹配";
            }
            else if(resp_json["optype"] == "match_stop")
            {
                console.log("玩家已经离开匹配队列");
                button_flag = "stop";
                be.innerHTML="开始匹配";
            }
            else if(resp_json["optype"] == "match_success")
            {
                console.log("找到另外一名玩家，匹配成功！");
                location.replace("/game_room.html");
            }
            else 
            {
                alert(evt.data);
                location.replace("login.html");
            }
        }
        get_user_info();
    </script>

</body>

</html>